<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">后台管理系统</div>
            <el-form class="ms-content" label-width="0" :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item prop="username">
                    <el-input v-model="ruleForm.username" clearable placeholder="请输入用户名">
                        <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')" clearable placeholder="请输入密码" >
                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                    </el-input>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                </div>
                <p class="login-tips">Tips : 请填写用户名和密码</p>
            </el-form>
        </div>
    </div>
</template>

<script>
    import Cookie from 'js-cookie'
    export default {
        name: "login",
        data(){
          return {
              ruleForm: {
                  username: 'admin',
                  password: 'admin888'
              },
              rules:{
                  username: [
                      { required: true, message: '请输入用户名', trigger: 'blur' }
                  ],
                  password: [
                      { required: true, message: '请输入密码', trigger: 'blur' }
                  ]
              }
          }
        },
        mounted(){
            console.log(123)
        },
        methods:{
            submitForm(formName){

                this.$refs[formName].validate((valid,obj)=>{
                    if(!valid){
                        // let test1 = Object.keys(obj);
                        let test = Object.values(obj);
                        this.$message({
                            message: test[0][0].message,
                            type: 'warning'
                        });
                        console.log(test);
                        return false;
                    }else{
                        this.login();
                    }

                    console.log(valid);
                })
            },
            login(){
                let This = this;
                This.postAjax('admin/login',{username:This.ruleForm.username,password:This.ruleForm.password},false).then(res=>{
                    This.$message({
                        message: res.msg,
                        type: 'success'
                    });
                    if(res.code){
                        Cookie.set('access_token',res.access_token,{ expires: 1 });
                        This.$router.push('/');
                    }
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .login-wrap{
        position: fixed;
        z-index: 11;
        width: 100%;
        height: 100%;
        background: url("../static/img/login-bg.jpg");
        background-size: cover;
    }
    .ms-login{
        position: relative;
        width: 350px;
        left: 50%;
        top: 50%;
        transform:translate(-50%,-50%);
        border-radius: 5px;
        background: rgba(255,255,255, 0.3);
        overflow: hidden;
        .ms-title{
            width: 100%;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            color: #ffffff;
            border-bottom: 1px solid #dddddd;
        }
    }
    .ms-content{
        padding:30px 30px;
    }
    .login-btn{
        text-align: center;
        button{
            width: 100%;
            height: 36px;
            margin-bottom: 10px;
        }
    }
    .login-tips{
        font-size: 12px;
        line-height: 30px;
        color: #ffffff;
    }
</style>